<!DOCTYPE html>
<html lang="zh-cmn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人体时钟 Show v0.2.0</title>
  <meta name="keywords" content="人体时钟秀">
  <meta name="description" content="人体时钟秀 https://etutor.xyz/body-clock">
  <meta name="author" content="g8up@qq.com">
  <link rel="stylesheet" href="./public/style.css">
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?16dde6e35eda3aa5445acd3856b4805d";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>

<body>
  <div id="app">
    <template v-for="(item, index) in time">
      <img v-for="num in item" :src="getImg(num)">
      <span class="sp" v-if="index !== time.length -1">:</span>
    </template>
  </div>

  <script src="https://unpkg.com/vue@3"></script>

  <script>
    const split = (timeString) => {
      const [h, m, s] = timeString.split(':');
      return [h, m, s].map(numSnippet => {
        const nums = numSnippet.split(''); // '12' -> '1', '2'
        return nums;
      });
    };

    Vue.createApp({
      data() {
        return {
          time: [],
        }
      },

      methods: {
        getImg(num) {
          return `public/imgs/${NUM_MAP[num]}`;
        }
      },

      mounted() {
        setInterval(() => {
          this.time = split(getTime());
        }, 1e3);
      }
    }).mount('#app');

    const getTime = () => {
      return new Date().toLocaleTimeString(); // '22:58:55'
    };

    const NUM_MAP = { // 键值对， key value
      0: '0.jpg',
      1: '1.webp',
      2: '2.jpg',
      3: '3.webp',
      4: '4.webp',
      5: '5.webp',
      6: '6.webp',
      7: '7.webp',
      8: '8.webp',
      9: '9.webp',
    };

  </script>
</body>

</html>